<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        canvas{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <canvas id="box" width="500" height="500">您的浏览器不支持画布</canvas>
    <script type="text/javascript">
        var  box=document.getElementById("box");
        var pen=box.getContext("2d");
        pen.clearRect(0,0,box.width,box.height);//清除画布

        //画一条直线（起始点，终点）
        pen.moveTo(100,30);
        pen.lineTo(200,30);
        pen.stroke();

        //画一个三角形
        //beginPath()开启一段路径
        pen.beginPath();
        pen.moveTo(100,50);
        pen.lineTo(50,100);
        pen.lineTo(150,100);
        //closePath()关闭路径
        pen.closePath();
        pen.stroke();

        //画一个矩形（rect()  fillRect()  strokeRect()）
        pen.beginPath();
        pen.rect(160,130,100,150);
        pen.closePath();
        pen.stroke();

        pen.beginPath();
        //fillRect()----填充一个矩形，默认是黑色的，不用渲染
        //fillRect绘制矩形，设置的边框样式的时候没有效果
        pen.fillStyle="red";//设置边框样式
        //pen.fill();
        pen.fillRect(100,300,100,150);
        pen.closePath();

        pen.beginPath();
        pen.fillStyle="yellow";
        pen.fill();
        //strokeRect()----绘制带有矩形边框的矩形，不用渲染，有默认颜色，也是黑灰
        //strokeRect绘制的矩形，设置的填充样式的时候没有效果
        pen.strokeRect(300,300,100,150);
        pen.closePath();

        //画圆
        pen.beginPath();
        pen.arc(400,100,50,0,Math.PI*2,true);
        pen.closePath();
        pen.stroke();

        //画一条曲线(二次贝塞尔曲线)
        pen.beginPath();
        pen.moveTo(119,221);
        pen.quadraticCurveTo(111,37,372,102);
        pen.stroke();
        pen.closePath();

        //三次贝塞尔曲线
        //pen.bezierCurveTo();
    </script>
</body>
</html>